<script setup lang='ts'>
import { useTabStore } from '@/store/tab';
import { useMainStore } from '@/store/index'
import { ref,onMounted,watchEffect } from 'vue'
import * as mars3d from "mars3d"
const tabStore = useTabStore();
const store = useMainStore()
const isOverBtnShow = ref<boolean>(false)
onMounted(async () => {
  // 目标节点
  const targetNode = document.getElementById('listBox3');
  let height = targetNode.offsetHeight;
  let top2Bottom = window.innerHeight - targetNode.getBoundingClientRect().top -10

 // 创建一个 MutationObserver 实例
 const observer = new MutationObserver((mutationsList, observer) => {
   // 在每次 DOM 变化时触发的回调函数
   for (let mutation of mutationsList) {
     if (mutation.type === 'attributes'&& targetNode.offsetHeight!=height) {
      if(targetNode.offsetHeight < top2Bottom) {
        targetNode.style.top = '0px'
      }else {
        targetNode.style.top = (top2Bottom - targetNode.offsetHeight - 10) + 'px'
      }
     }
   }
 });

 // 配置 MutationObserver
 const config = { childList: true, attributes: true, subtree: true };

 // 开始观察目标节点
 observer.observe(targetNode, config);
})
/* 测量工具 */
// 空间距离
const measureLength = () => {
  tabStore.clFlag = isOverBtnShow.value = true
  window.measure.clearDrawing()
  window.measurePolygon.clearDrawing()
  window.measure.distance({showAddText: true,
    style: {color: "#d9001b"},
    label:{
      font_family:"微软雅黑",
      background:false,
      color:"#fff",
      outline:true,
      outlineColor:"#000"
    },
  })
}

// 贴地面积
const measureSurfaceeArea = () => {
  tabStore.clFlag = isOverBtnShow.value = true
  window.measure.clearDrawing()
  window.measurePolygon.clearDrawing()
  window.measurePolygon.startDraw({
    type: "polygon",
    style: {
      color: "#d9001b",
      clampToGround: false,
      outline: true,
      opacity: 0.4,
      outlineColor:"#d9001b",
      outlineWidth: 1,
    },
    success:function(graphic)  {
      let area = mars3d.MeasureUtil.getArea(graphic.getCoordinates())
      let areaPF = area.toString().split('.')[0].length>6?(area/1000000).toFixed(2) + ' 平方千米\n ':area.toFixed(2) + ' 平方米\n '
      let areaMu = (area/666.666666667).toFixed(2)
      let text = "面积：" + areaPF + areaMu + " 亩"
      graphic.setStyle({
        label:{
          text:text,
          font_size:16,
          font_family:"微软雅黑",
          outline:true,
          outlineOpacity:1,
          outlineWidth:4
        }
      })
    }
  })
}

// 三角测量
const TriangleArea = () => {
  tabStore.clFlag = isOverBtnShow.value = true
  window.measure.clearDrawing()
  window.measure.heightTriangle({
      style: {
          color: "#d9001b",
          outlineColor: "#d9001b"
      },
      label:{
        font_family:"微软雅黑",
        background:false,
        color:"#fff",
        outline:true,
        outlineColor:"#000"
      },
  })
}

// 清空绘制
const clearMeasure = () => {
  window.measure.clear()
  window.measurePolygon.clear()
  tabStore.clFlag = isOverBtnShow.value = false
}  

// 结束绘制
const endDrawer = () => {
  window.measure.clearDrawing()
  window.measure.endDraw()
}

/* 结束绘制 */
const overDrawConfirm = () => {
  tabStore.clFlag = isOverBtnShow.value = false
  window.measure.clearDrawing()
  window.measure.endDraw()
  window.measurePolygon.endDraw()
}

watchEffect(() => {
  if(store.activeBtn!=3&&store.activeBtn!='')endDrawer()
})
</script>

<template>
  <!-- 影像 -->
  <div class="TabbarBtn">
    <div id="third-element-introduction">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="测量"
        placement="left"
      >
      <div :class="store.activeBtn==3?'iconBox show':'iconBox'" @click="[store.activeBtn==3?store.activeBtn=0:store.activeBtn=3]">
        <img src="@/assets/image/tools.png" alt="">
      </div>
      </el-tooltip>
    </div>

    <div :class="store.activeBtn==3?'btnTooltip show':'btnTooltip'" id="listBox3">
        <span class="listBox" id="forth-element-introduction">
          <i @click="store.activeBtn=0" class="iconfont icon-cuo" style="position: absolute;right: 10px; top: 10px;cursor: pointer;"></i>
          <div style="clear: both;padding: 30px 0 5px 0;" class="url-tree">
            <div style="display: flex;justify-content: space-around;flex-wrap: wrap;">
              <span class="endDrawer" style="margin-bottom: 10px;" @click="measureLength()">距离测量</span>
              <span class="endDrawer" style="margin-bottom: 10px;" @click="measureSurfaceeArea()">面积测量</span>
              <!-- <span class="endDrawer" style="margin-bottom: 10px;" @click="TriangleArea()">三维测量</span> -->
              <span class="clearMeasure" style="margin-bottom: 10px;" @click="clearMeasure()">清空绘制</span>
            </div>
          </div>
        </span>
    </div>

  </div>
  <div v-show="isOverBtnShow" class="overDraw" @click="overDrawConfirm">
    <div class="overDraw_box">
      结束绘制
    </div>
  </div>
</template>

<style scoped>
.endDrawer,
.clearMeasure{
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
  background: #3DBDA7;
  color: #fff;
  cursor: pointer;
}
.clearMeasure {
  background: #FF8D1A;
}
</style>
<style>
  .endDrawerButton {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
}
</style>
<style>
/* 测量样式 */
.endDrawer,
.clearMeasure{
  display: inline-block;
  padding: .384rem .577rem;
  border-radius: .384rem;
  background: #60acff;
  color: #fff;
  cursor: pointer;
}
.clearMeasure {
  background: #f5821c;
}
.title_content .el-input__wrapper{
  background-color: rgba(29,30,34,.8);

}
.title_content .el-input__wrapper .el-input__inner,
.el-notification.showTouchTips .el-notification__title{
  color: #fff;
}
.el-notification.showTouchTips{
  background-color: rgba(29,30,34,.8);
  border: 1px solid rgba(29,30,34,.8);
  width: auto;
}

.el-notification.showTouchTips .el-notification__closeBtn svg path{
  fill:#fff;
}
/* 单选按钮 */
.listBox-layer{
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
}
.listBox-layer .el-radio{
  width: 100%;
  margin-right: 0rem;
  justify-content: center;
}
.listBox-layer .el-radio__inner{
  background-color: transparent;
  border-color: #3DBDA7;
  border-width: 0.15rem;
  /* border-radius: 3px; */
  height: 1rem;
  width: 1rem;
}
.listBox-layer .el-radio__label{
  color: #fff;
  font-size: .85rem;
}
.listBox-layer .el-radio__input.is-checked .el-radio__inner{
  border-color: #3DBDA7;
  background: #3DBDA7;
}
.listBox-layer .el-radio__inner::after{
  background-color: rgba(29, 30, 34, .8);
}
.listBox-layer .el-radio:hover .el-radio__label,
.listBox-layer .el-radio__input.is-checked+.el-radio__label{
  color: #3DBDA7;
}
</style>
